<script setup>
import { defineProps } from 'vue'

// 接收父组件传递的props
const props = defineProps({
  height: {
    type: String,
    default: '200px' // 默认高度
  },
  color: {
    // 新增的颜色prop
    type: String,
    default: 'rgba(255, 255, 255, 1)' // 默认颜色
  }
})

// // 计算属性，用于根据type值设置不同的fill颜色的透明度
// const getFillOpacity = computed(() => {
//   const opacities = [0.3, 0.5, 0.7, 0.9] // 定义不同type对应的opacity值
//   return opacities[Math.min(props.type, 3)] // 确保type的最大值为3
// })
</script>

<template>
  <!-- 底部流动波浪 -->
  <div class="waves-container">
    <svg
      class="waves"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28"
      preserveAspectRatio="none"
      shape-rendering="auto"
      :style="{ height: height }"
    >
      <defs>
        <path
          id="gentle-wave"
          d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
        />
      </defs>
      <g class="parallax">
        <use
          xlink:href="#gentle-wave"
          x="48"
          y="0"
          :fill="`${props.color.replace(/rgba?$([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+$/, `rgba($1, $2, $3)`)}`"
        />
        <use
          xlink:href="#gentle-wave"
          x="48"
          y="3"
          :fill="`${props.color.replace(/rgba?$([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+$/, `rgba($1, $2, $3)`)}`"
        />
        <use
          xlink:href="#gentle-wave"
          x="48"
          y="5"
          :fill="`${props.color.replace(/rgba?$([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+$/, `rgba($1, $2, $3)`)}`"
        />
        <use
          xlink:href="#gentle-wave"
          x="48"
          y="7"
          :fill="`${props.color.replace(/rgba?$([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+$/, `rgba($1, $2, $3)`)}`"
        />
      </g>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 底部流动波浪 */
.waves-container {
  // position: absolute;
  width: 100%;
  z-index: 3;
  bottom: 0;
  pointer-events: none;

  .waves {
    position: relative;
    width: 100%;
    height: v-bind(height);
  }

  .parallax > use {
    /* 使use元素执行move-forever动画 */
    animation: move-forever 25s
      cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  }

  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }

  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }

  @media (max-width: 768px) {
    .waves {
      height: 40px;
      min-height: 40px;
    }
  }
}
</style>
